<template>
  <div class="verification-button" v-if="buttonShow">
    <button v-if="!error">
      <div class="info" @click="click">
        <img :src="icon" :class="{'rotating':rotating}">
        <span v-if="infoShow" :style="{'color':infoColor}">{{info}}</span>
      </div>
    </button>
    <div class="error" v-if="error">
      <p>错误</p>
    </div>
  </div>
</template>

<script>
  import dunpai from '@/assets/dunpai.svg'
  import dunpaiok from '@/assets/dunpaiok.svg'
  import xuanzhuan from '@/assets/xuanzhuan.svg'
    export default {
        data() {
            return {
              //提示信息
              info:'点击进行验证',
              //提示信息颜色
              infoColor:'#757575',
              //控制点击次数
              clickKey:true,
              icon:dunpai,
              //信息显示隐藏
              infoShow:true,
              //按钮显示隐藏
              buttonShow:true,
              //旋转
              rotating:false,
              error:false,
            }
        },
        props:{
            appid:{},
            operation:{},
            data:{}
        },
        created(){
          //接收刷新事件
          window.addEventListener('message', (e) => {
            if (e.data.event == "refresh") {
              window.location.reload();
            }
          })
        },
        mounted(){

          //保存appid,operation,主题
          this.$store.dispatch('save_appid',this.$route.params.appid);
          this.$store.dispatch('save_operation',this.$route.params.operation);
          this.$store.dispatch('save_theme',this.$route.params.theme);
            //如果有验证组件类型
            if(this.$store.state.type){
              this.validation();
            }
        },
        beforeDestroy() {

        },
        methods: {
          //验证方法
          validation(){
            this.buttonShow=false;
            this.$ajax('check_virtual',
              {
                "appid": this.$store.state.appid,
                "operation": this.$store.state.operation,
                "type": this.$store.state.type,
                "identifying": this.$store.state.identifying,
                "value": this.$store.state.value
              },
              (res) => {
                //如果验证通过
                if (res.data.data) {
                  window.parent.postMessage({
                    'event':'validationSucceed',
                    'data':{
                      data:this.$store.state.identifying
                    }
                  },'*');
                  this.$store.dispatch('save_success',true);
                  this.rotating = false;
                  this.icon = dunpaiok;
                  this.info = "验证通过";
                  this.infoColor = "#006c21";
                  this.infoShow = true;
                  this.buttonShow=true;
                }
                else{
                  //验证状态
                  this.$store.dispatch('save_validation');
                  if(this.$store.state.type=='img_click') {
                    this.$router.push('/img_click');
                  }
                  else if(this.$store.state.type=='img_base64'){
                    this.$router.push('/img_base64');
                  }
                }
              }, (error) => {
                //错误事件
                window.parent.postMessage({
                  'event':'validationError',
                  'data':{

                  }
                },'*');
                this.buttonShow=true;
                this.error=true;
              })
          },
          //点击方法
          click() {
            if (!this.$store.state.success&&this.clickKey) {
              this.clickKey=false;
              this.icon = xuanzhuan;
              this.infoShow = false;
              this.rotating = true;
              let time = setTimeout(() => {
                this.$ajax('index', {
                  "appid": this.$store.state.appid,
                  "operation": this.$store.state.operation
                }, (res) => {
                  //存储identifying
                  this.$store.dispatch('save_identifying',res.data.data.identifying);
                  //如果是ajax类型
                  if (res.data.data.type == 'ajax') {
                    this.$store.dispatch('save_value',"58");
                    this.$store.dispatch('save_type',"ajax");
                    //虚拟验证
                    this.validation();
                  }
                  //如果是图片点击类型
                  else if (res.data.data.type == 'img_click') {
                    window.parent.postMessage({
                      'event': 'changeBox',
                      'data': {

                      }
                    }, "*");
                    //保存验证类型
                    this.$store.dispatch('save_type','img_click');
                    this.$router.push('/img_click');
                  }
                  //如果是base64类型
                  else if (res.data.data.type == 'img_base64') {
                    window.parent.postMessage({
                      'event': 'changeBox',
                      'data': {

                      }
                    }, "*");
                    //保存验证类型
                    this.$store.dispatch('save_type','img_base64');
                    this.$router.push('/img_base64');
                  }
                })
              }, 1500)
            }
          }
        }
    };
</script>
<style scoped>
  button{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    outline:none;
    background:transparent;
  }
  .error{
    position:fixed;
    top:0;
    left:0;
    font-size:18px;
    color:#fff;
    width:100%;
    height:100%;
    border:none;
    outline:none;
    background:red;
  }
  .error>p{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin:0;
  }
  .info{
    display:flex;
    justify-content:center;
    align-items: center;
    margin:0 auto;
    height:100%;
    font-size:16px;
  }
  .info>img{
    height:60%;
    margin-right:5px;
  }
  .rotating{
    transition: all 10s linear;
    transform: rotate(3600deg);
  }
</style>
